﻿@page "/Home"

@model AntQuartzUI.Pages.Home

@{
    Layout = "Shared/_Layout";
}

<div id="app">
    <a-layout>
        <a-layout-header>
            <div class="logo"></div>
            <a-menu
                v-model:[selected_keys]="selectedKeys"
                theme="dark"
                mode="horizontal"
                :style="{ lineHeight: '64px' }"
            >
                <a-menu-item key="workList">任务列表</a-menu-item>
            </a-menu>
        </a-layout-header>
        <a-layout-content>
            <a-card class="layout-content-card" id="layout-content-card">
                <a-space align="end">
                    <a-form-item label="刷新间隔:">
                        <a-select v-model:value="refreshTime" style="width: 80px" :options="refreshTimeOptions"></a-select>
                    </a-form-item>
                    <a-button size="middle">全部启动</a-button>
                    <a-button danger @@click="PauseTrigger">全部暂停</a-button>
                </a-space>
                <div style="height: 8px"></div>
                <a-table :columns="columns" :data-source="tableData" class="components-table-demo-nested"
                         :pagination="false" :scroll="{ y: tableHeight }" size="middle" bordered >
                    <template #[expanded_row_render]="{ record }">
                        <a-row>
                            <a-col :span="6">
                                <a-card v-for="(trigger,index) in record.triggers" :key="index" :title="trigger.triggerName" size="small">
                                    <template #extra>
                                        <a-space>
                                            <a-button type="primary" size="small" @@click="StartTrigger(trigger)">启动</a-button>
                                            <a-button type="primary" danger size="small" @@click="PauseTrigger(trigger)">暂停</a-button>
                                        </a-space>
                                    </template>
                                    
                                    <a-form>
                                        <a-form-item label="执行次数">{{trigger.fireCounts}}</a-form-item>
                                        <a-form-item label="串行取消次数">{{trigger.vetoCounts}}</a-form-item>
                                        <a-form-item label="执行失败次数">{{trigger.errorCount}}</a-form-item>
                                        <a-form-item label="优先级">{{trigger.priority}}</a-form-item>
                                        <a-form-item label="上次执行时间">{{trigger.previousFireTime}}</a-form-item>
                                        <a-form-item label="下次执行时间">{{trigger.nextFireTime}}</a-form-item>
                                        <a-form-item label="当前状态">{{trigger.status}}</a-form-item>
                                        <a-form-item label="结果"><a-button>最近记录</a-button></a-form-item>
                                    </a-form>
                                </a-card>
                            </a-col>
                        </a-row>
                    </template>
                </a-table>
            </a-card>
        </a-layout-content>
    </a-layout>
</div>

@section Scripts{

    <script>
        window.addEventListener('DOMContentLoaded', function () {
            const {createApp} = Vue;
            const { message,Modal } = antd
            
            createApp({
                mounted() {
                    const that = this

                    document.getElementById('app').style.opacity = '1'; // 挂载完成后显示内容
                    adapterHeight()
                    window.addEventListener("resize", adapterHeight);

                    upData()
                    setInterval(upData,3000);
                    
                    function upData(){
                        axios.get('?handler=JobPageList',null)
                            .then(res => {
                                that.tableData = res.data;
                            })
                    }
                    
                    function adapterHeight() {
                        that.tableHeight = document.getElementById("layout-content-card").clientHeight - 48 - 32 - 64 - 8
                    }
                },
                data() {
                    return {
                        expanded_row_render: 'expandedRowRender',
                        selected_keys: 'selectedKeys',

                        columns: [
                            {title: 'Job名称', dataIndex: 'jobName', key: 'jobName', align: "center"},
                            {title: 'Job组名称', dataIndex: 'groupName', key: 'groupName', align: "center"},
                            {title: '描述', dataIndex: 'describe', key: 'describe', align: "center"},
                            {title: '类名', dataIndex: 'className', key: 'className', align: "center"},
                            {title: '命名空间', dataIndex: 'nameSpace', key: 'nameSpace', align: "center"},
                            {title: '执行模式', dataIndex: 'executeModel', key: 'executeModel', align: "center"},
                            {title: '是否任务记忆', dataIndex: 'persistJobDataAfterExecution', key: 'persistJobDataAfterExecution', align: "center"}
                        ],
                        tableData : [],
                        tableHeight: 0,
                        selectedKeys: ['workList'],
                        refreshTime: 500,
                        refreshTimeOptions: [
                            { label : "0.3秒",value : 300 },
                            { label : "0.5秒",value : 500 },
                            { label : "1秒",value : 1000 },
                            { label : "2秒",value : 2000 },
                            { label : "3秒",value : 3000 },
                            { label : "5秒",value : 5000 },
                        ]
                    }
                },
                methods: {
                    PauseTrigger(tiggerValue){
                        Modal.confirm({
                            title: '确认',
                            content: '确定要暂停该触发器?',
                            onOk() {
                                axios.post('?handler=PauseTrigger',tiggerValue)
                                    .then(res=> {
                                        message.success("关闭成功")
                                    })
                            },
                            class: 'test',
                        });
                    },
                    StartTrigger(tiggerValue){
                        axios.post('?handler=StartTrigger',tiggerValue)
                            .then(res=> {
                                message.success("启动成功")
                            })
                    }
                },
            })
                .use(antd)
                .mount('#app');
        });
    </script>
}

@section Styles{
    <style>
        #app {
            opacity: 0;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        
        .ant-layout {
            height: 100%;
        }

        .layout-content-card {
            height: calc(100% - 16px);
            margin: 8px;
        }
        
        .ant-form-item{
            margin-bottom: 0;   
        }
    </style>
}